<!-- 会议呼叫 -->
<template>
  <app-page card full>
    <template #header>会议呼叫</template>

    <app-page-main>
      <div class="call-main">
        <div class="call-main__meet">
          <div class="call-main__meet-body">
            <div
              class="call-main__meet-wrapper"
              :style="{ '--location-column': data.maxCol, '--location-row': data.maxRow }"
            >
              <div class="area-wrapper--top">
                <div class="area-wrapper--top-locale" v-for="order in data.maxCol" :key="order">
                  {{ order }}
                </div>
              </div>
              <div class="area-wrapper--left">
                <div class="area-wrapper--left-locale" v-for="order in data.maxRow" :key="order">
                  {{ order }}排
                </div>
              </div>
              <div class="call-main__meet-wrapper--area">
                <div
                  :class="[
                    'ellipsis location-wrapper-square',
                    item.status === 0 && 'calling',
                    item?.id && data.checkedCall?.id === item.id && 'current-row',
                  ]"
                  v-for="(item, index) in gridCells"
                  :key="index"
                  :title="'第' + item.seatRow + '排' + item.seatCol + '列'"
                  @click="handleCellClick(item)"
                ></div>
              </div>
            </div>
          </div>

          <div class="app-flex-mid call-main__meet-calling" v-if="data.checkedCall?.id">
            <div class="app-flex-mid call-main__meet-calling--detaile">
              <span>{{ data.checkedCall.name }}</span>
              <span>{{ data.checkedCall.seatRow }}排{{ data.checkedCall.seatCol }}列</span>
              呼叫
            </div>
            <el-button style="height: 100%" type="primary" plain @click="handleAccept()">接受处理</el-button>
          </div>
        </div>
      </div>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar" v-if="$route.query.id">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
    </template>
  </app-page>
</template>

<script setup>
import { ElMessage, ElNotification } from 'element-plus'
import { usePageEdit, http } from 'jax-node'
import { onMounted, onUnmounted } from 'vue'

const route = useRoute()
const { pageData, pageActions } = usePageEdit({
  api: 'meet/call',
})

const data = reactive({
  maxRow: 0,
  maxCol: 0,
  list: [],

  checkedCall: {},

  // 弹出的消息对象
  toastList: [],
})

// 计算格子与数据结合
const gridCells = computed(() => {
  const cells = []
  if (data.maxRow && data.maxCol) {
    for (let i = 1; i <= data.maxRow; i++) {
      for (let j = 1; j <= data.maxCol; j++) {
        const matched = data.list.find(item => item.seatRow === i && item.seatCol === j)
        cells.push(matched ? matched : { seatRow: i, seatCol: j })
      }
    }
  }
  return cells
})

// 弹出提示消息
let noticeTimer = null
const toastHandle = msgList => {
  if (msgList.length <= 0) return
  if (noticeTimer) {
    clearTimeout(noticeTimer)
    noticeTimer = null
  }
  for (let i = 0; i < msgList.length; i++) {
    const item = msgList[i]
    setTimeout(() => {
      ElNotification({
        title: '呼叫服务',
        message: h('span', null, [
          h('span', null, '第' + item.seatRow + '排' + item.seatCol + '列 '),
          h('span', { style: { color: 'red' } }, item.name),
          h('span', null, ' 进行呼叫，请及时处理'),
        ]),
        showClose: false,
        type: 'warning'
      })
    }, 600)
  }
}

const getCallData = async () => {
  return await http
    .get(pageData.api, {
      params: {
        meetId: route.query.id,
        pageSize: -1,
        status: 0,
      },
    })
    .then(res => {
      pageData.detail = res
      data.list = res
      res.length > 0 && toastHandle(res)
      // data.list = [
      //   {
      //     isDelete: false,
      //     isOpen: false,
      //     meetId: '67cdbad531722e5a3b140778',
      //     roomId: '67cd8c05b45abe6b1f7efe3a',
      //     name: '测试',
      //     mobile: '13880582267',
      //     status: 0,
      //     seatRow: 1,
      //     seatCol: 1,
      //     createdAt: '2025-03-10 20:50:40',
      //     updatedAt: '2025-03-10 20:50:40',
      //     id: '67cee020c6320c5699b13438',
      //   },
      //   {
      //     isDelete: false,
      //     isOpen: false,
      //     meetId: '67cdbad531722e5a3b140779',
      //     roomId: '67cd8c05b45abe6b1f7efe3b',
      //     name: '测试2',
      //     mobile: '13880582267',
      //     status: 0,
      //     seatRow: 3,
      //     seatCol: 6,
      //     createdAt: '2025-03-10 20:50:40',
      //     updatedAt: '2025-03-10 20:50:40',
      //     id: '67cee020c6320c5699b13439',
      //   },
      // ]
      console.log('~🚀🚀🚀🚀~🚀🚀🚀🚀~🚀🚀🚀🚀~ ~ res:', res)
    })
}

pageActions.getData = async () => {
  await getCallData()

  await http.get(`/meet/room/${route.query.roomId}`).then(res => {
    data.maxRow = res.maxRow
    data.maxCol = res.maxCol
  })
}

const handleCellClick = item => {
  item.id && (data.checkedCall = item)
}

const handleAccept = () => {
  if (data.checkedCall?.id) {
    http({
      method: 'PUT',
      url: `/meet/call/${data.checkedCall.id}`,
      data: {
        status: 1,
      },
    }).then(() => {
      ElMessage.success('操作成功')
      data.checkedCall = {}
      getCallData()
    })
  } else {
    ElMessage.warning('请先选择一个坐席')
  }
}

let timer = null
onMounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  timer = setInterval(() => {
    getCallData()
  }, 5000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }

  if (noticeTimer) {
    clearTimeout(noticeTimer)
    noticeTimer = null
  }
})
</script>

<style lang="scss" scoped>
.call-main {
  display: flex;
  height: 100%;
  &__meet {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 15px;
    flex: 1;
    height: 100%;
    &-body {
      height: 100%;
      min-height: 0;
      background-color: #f8f8f8;
      overflow: hidden;
    }
    &-wrapper {
      --location-width: 25px;
      --location-height: 25px;
      position: relative;
      overflow: auto;
      min-height: 0;
      height: 100%;
      .area-wrapper--top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 50px;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(var(--location-column), var(--location-width));
        grid-gap: 10px;
        gap: 10px;
        justify-content: center;
        text-align: center;
        background-color: rgba(#000, 0.3);
        color: #fff;
      }
      .area-wrapper--left {
        position: absolute;
        top: 50px;
        left: 0;
        display: grid;
        grid-template-rows: repeat(var(--location-row), var(--location-height));
        grid-gap: 10px;
        gap: 10px;
        line-height: var(--location-height);
        background-color: rgba(#000, 0.3);
        color: #fff;
        text-align: center;
        &-locale {
          width: 40px;
        }
      }
      &--area {
        display: grid;
        grid-template-columns: repeat(var(--location-column), var(--location-width));
        grid-template-rows: repeat(var(--location-row), var(--location-height));
        grid-gap: 10px;
        gap: 10px;
        justify-content: center;
        padding: 10px 20px 20px 40px;
        .location-wrapper-square {
          line-height: var(--location-height);
          background-color: #fff;
          border: 1px solid #35a3ff;
          border-radius: 5px;
          text-align: center;
          user-select: none;
          font-size: 12px;
          &.calling {
            position: relative;
            cursor: pointer;
            &::before {
              content: '';
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: #35a3ff;
              transform-origin: center center;
              animation: animate 2s linear infinite;
            }
          }
          &.current-row {
            border: 3px solid var(--el-color-error);
          }
        }
      }
    }
    &-calling {
      gap: 15px;
      &--detaile {
        flex: 1;
        gap: 15px;
        justify-content: center;
        padding: 8px 0;
        background-color: var(--el-color-primary-light-5);
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  @keyframes animate {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
}
</style>
